@import url('./transition/index.scss');
@import url('./dark/css-vars.scss');
* {
  margin: 0;
  padding: 0;
  // 修改vxe-ui主题色
  --vxe-ui-font-primary-color: var(--el-color-primary); // vxe-ui主题色
  --vxe-ui-switch-open-background-color: var(--el-color-primary); // vxe-ui开关打开背景色
}
// element-plus样式修改
.el-dropdown-menu__item:hover,
.el-sub-menu__title:hover,
.el-menu-item:hover {
  color: var(--el-color-primary);
}

.el-menu-item,
.el-sub-menu__title {
  border-radius: 8px;
}

// 顶部加载条
.custom-loading-bar .el-loading-spinner {
  height: 4px;
  width: 100%;
  top: 0;
  position: fixed;
  background-color: #409eff;
  animation: loading-bar 1.5s linear infinite;
}
@keyframes loag-bar {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

// 换肤css特效转换
::view-transition-old(*) {
  animation: none;
}

::view-transition-new(*) {
  animation: clip 0.5s ease-in;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

html.dark::view-transition-old(*) {
  animation: clip 0.5s ease-in reverse;
}

html.dark::view-transition-new(*) {
  animation: none;
}

html.dark::view-transition-old(root) {
  z-index: 9999;
}

html.dark::view-transition-new(root) {
  z-index: 1;
}

@keyframes clip {
  from {
    clip-path: circle(0% at var(--x) var(--y));
  }
  to {
    clip-path: circle(var(--r) at var(--x) var(--y));
  }
}
